<template>
  <a-menu v-model:selectedKeys="current" mode="horizontal" class = "mymenu">
    <a-menu-item key="comment" @click="comment"> 评论我的 </a-menu-item>
    <a-menu-item key="reply" @click="reply"> 回复我的 </a-menu-item>
    <a-menu-item key="likes" @click="likes"> 点赞消息 </a-menu-item>
    <a-menu-item key="sys" @click="sys"> 系统消息 </a-menu-item>
  </a-menu>
  <router-view @select="select"></router-view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

const router = useRouter(); //获取路由器

const current = ref();

const comment = () => {
  router.push({ path: "/user/message/comment" });
};

const reply = () => {
  router.push({ path: "/user/message/reply" });
};

const likes = () => {
  router.push({ path: "/user/message/likes" });
};

const sys = () => {
  router.push({ path: "/user/message/sys" });
};

const select = (val) => {
  current.value = val;
};

</script>

<style scoped>
.mymenu{
    margin-top: 2mm;
    margin-left: 1cm;
}
</style>